<template>
  <div class="orderDetele pageWrapper">
    <Loading :loading="loading">
      <Form :ref="formRef" :label-width="150" :model="formData" inline>
        <Card :bordered="true">
          <p slot="title">支付流水信息</p>
          <FormItem label="二维码订单号：" class="orderList" style="width:30%">
            <div @click="gotoQrOrderDetail">{{ formData.orderId }}</div>
          </FormItem>
          <FormItem label="支付流水号：" style="width:30%">
            <div>{{ formData.flowId }}</div>
          </FormItem>
          <FormItem label="交易凭证号：" style="width:30%">
            <div>{{ formData.voucherNum }}</div>
          </FormItem>
          <FormItem label="C2B码（二维码编号）：" style="width:30%">
            <div>{{
                formData.qrNo
              }}
            </div>
          </FormItem>


          <FormItem label="商户名称：" style="width:30%">
            <div>{{ formData.merchantName }}</div>
          </FormItem>
          <FormItem label="用户：" style="width:30%">
            <div>{{ formData.userId }}</div>
          </FormItem>
          <FormItem label="付款方机构：" style="width:30%">
            <div>{{ formData.issCode }}</div>
          </FormItem>

          <FormItem label="订单金额：" style="width:30%">
            <div>{{ getAmount(formData.amount) }}</div>
          </FormItem>
          <FormItem label="优惠金额：" style="width:30%">
            <div>{{ getAmount(formData.couponAmount) }}</div>
          </FormItem>
          <FormItem label="支付金额：" style="width:30%">
            <div>{{ getAmount(formData.payAmount) }}</div>
          </FormItem>
          <FormItem label="退款金额：" style="width:30%">
            <div>{{ getAmount(formData.refundAmount)}}</div>
          </FormItem>
          <FormItem label="订单状态：" style="width:30%">
            <Tag v-if="formData.payStatus==='wait'" color="warning">{{ formData.payStatusName }}</Tag>
            <Tag v-else-if="formData.payStatus==='fail'" color="error">{{ formData.payStatusName }}</Tag>
            <Tag v-else-if="formData.payStatus==='success'" color="success">{{ formData.payStatusName }}</Tag>
            <Tag v-else color="default">{{ formData.payStatusName }}</Tag>
          </FormItem>

          <FormItem label="创建时间：" style="width:30%">
            <div>{{ formData.createTime }}</div>
          </FormItem>

          <FormItem label="支付过期时间：" style="width:30%">
            <div>{{ formData.qrValidTime }}</div>
          </FormItem>

          <FormItem label="支付时间：" style="width:30%">
            <div>{{ formData.flowTime }}</div>
          </FormItem>

          <FormItem label="附加处理：" style="width:30%">
            <Tag v-if="formData.addnStatus===0||formData.addnStatus==='0'" color="default">{{ formData.addnStatusName }}</Tag>
            <Tag v-else-if="formData.addnStatus===1||formData.addnStatus==='1'" color="success">{{ formData.addnStatusName }}</Tag>
            <Tag v-else color="error">{{ formData.addnStatusName }}</Tag>
          </FormItem>
          <FormItem label="当前交易状态：" style="width:30%">
            <Tag color="warning">{{ formData.tradeStatusName }}</Tag>
          </FormItem>

        </Card>

        <Card :bordered="true" v-if="formData.qrFlowTrades && formData.qrFlowTrades.length">
          <p slot="title">交易记录</p>
          <div>
            <Table
              maxHeight="auto"
              ref="tables"
              size="small"
              :data="formData.qrFlowTrades||[]"
              :columns="flowDetailColumns"
              :border="true"
              :show-header="true"
            />
          </div>
        </Card>

      </Form>
      <Button type="primary" @click="goBack">返回</Button>
    </Loading>
  </div>
</template>
<script>
import {InputNumber, Input, Button, Form, FormItem, Message} from "view-design";
import Loading from "@/components/Loading";
import Uuid from "uuid";
import util from '@/utils/util'

import {queryQrFlowDetail} from '@/api/payment';

export default {
  components: {
    InputNumber,
    Loading,
    Input,
    Button,
    Form,
    FormItem,
    Message
  },
  props: ["id"],
  beforeMount: async function () {
    // let id = this.$route.query.id;
    // let response = await this.$store.dispatch(`${namespace}/getDetail`, id);
    // console.log(response);
    // if (response.errorCode === 0) {
    //   this.formData = response.data.orderDetailVo
    //   this.formChilderData = response.data.subOrders || [{item: '4'}]
    //   this.formRefundsData = response.data.refundOrdersDetails || {item: '4'}
    //   this.formCouponsDtat = response.data.coupons
    // //   if (!response.data.subOrders || !response.data.subOrders.length) {
    // //       this.formChilderData = [{subOrderId: ''}]
    // //   }
    // //   if (!response.data.refundOrdersDetails || !response.data.refundOrdersDetails.length) {
    // //       this.formRefundsData = [{flowId: ''}]
    // //   }
    // //   if (!response.data.coupons || !response.data.coupons.length) {
    // //       this.formCouponsDtat = [{transactionId: ''}]
    // //   }
    // }
  },
  data: function () {
    let vm = this;
    return {
      taxpayerId: this.$route.query.id,
      formRef: Uuid.v1(),
      formData: {}, // 订单信息
      flowDetail: [],  // 子订单信息
      columns: [],
      disabled: false,
      loading:false,
      flowDetailColumns:[
        {
          title: '银联交易订单号',
          width: 185,
          key: 'tradeOrderNo'
        },
        {
          title: '交易类型',
          width: 175,
          key: 'tradeTypeName',
          render: (h, params) => {
            return h("span", `${params.row.tradeTypeName}（${params.row.tradeType}）`);
          }
        },
        {
          title: '交易币种',
          width: 175,
          key: 'currencyCode'
        },
        {
          title: '交易金额',
          width: 175,
          key: 'txnAmt',
          render: (h, params) => {
            return h("span", util.getYuan(params.row.txnAmt));
          }
        },
        {
          title: '交易时间',
          width: 175,
          key: 'flowTime'
        },
        {
          title: '原交易应答码',
          width: 175,
          key: 'origRespCode'
        },
        {
          title: '原交易应答信息',
          width: 175,
          key: 'origRespMsg'
        }
      ]
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    getAmount(value){
      return util.getYuan(value)
    },
    async getDetail() {
      try {
        this.loading=true
        let flowId = this.$route.query.flowId
        if (flowId) {
          const {data} =await queryQrFlowDetail(flowId)
          if(data.ret===0){
            console.log(data.data)
            this.formData=data.data
          }
        }
        this.loading=false
      } catch (error) {
        this.loading=false
        this.$Message.error({
          content: error
        })
      }
    },
    gotoQrOrderDetail() {
      if(this.formData && this.formData.orderId){
        this.$router.push({
          path: '/qr/qrOrderDetail', query: { orderId: this.formData.orderId }
        });
      }
    },
    goBack() {
      this.$router.go(-1);
    }
  },
};
</script>

<style>
</style>
<style lang="less" scoped>
.orderDetele {
  .title {
    border-bottom: 1px solid #999;
    margin-bottom: 10px;
    padding-bottom: 8px;
  }

  .orderList {
    color: blue;
    cursor: pointer;
  }

  .childerList {
    border-top: 1px solid #999;
    margin-top: 10px;
    word-break: break-all;
  }
}
</style>
